<template>
	<uni-popup ref="popup" type="bottom">
		<view class="popup-layout">
			<view class="title-row">
				<view>设置</view>
				<image :src="asserts.ic_close" @click="cancelClick"></image>
			</view>
			<view class="divider"></view>
			<view class="item-row" @click="isShowClick('0')">
				<image class="left-img" :src="asserts.ic_setting_public"></image>
				<view class="content">全部可见</view>
				<image class="right-img" :src="asserts.ic_radio_select" v-show="isShow=='0'"></image>
			</view>
			<view class="divider2"></view>
			<view class="item-row" @click="isShowClick('1')">
				<image class="left-img" :src="asserts.ic_setting_private"></image>
				<view class="content">仅自己可见</view>
				<image class="right-img" :src="asserts.ic_radio_select" v-show="isShow=='1'"></image>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		data() {
			return {
				isShow: ''
			}
		},
		methods: {
			//显示弹窗
			show(isShow) {
				this.isShow = isShow
				this.$refs.popup.open()
			},
			
			//点击取消
			cancelClick() {
				this.$refs.popup.close()
			},
			
			//
			isShowClick(isShow){
				this.$emit('selectIsShow', isShow)
				this.cancelClick()
			}
			
		}
	}
</script>

<style scoped lang="less">
	.popup-layout {
		width: 100%;
		height: 400rpx;
		display: flex;
		flex-direction: column;
		background-color: white;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
	}

	.title-row {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 32rpx;
		color: #021624;
		position: relative;
		font-weight: 500;

		image {
			position: absolute;
			right: 66rpx;
			top: 26rpx;
			width: 48rpx;
			height: 48rpx;
		}
	}

	.divider {
		width: 100%;
		height: 2rpx;
		background-color: #EEEEEE;
	}
	.divider2 {
		width: calc(100% - 64rpx);
		height: 1rpx;
		margin: 0 32rpx;
		background-color: #EEEEEE;
	}

	.item-row{
		width: 100%;
		height: 100rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0 32rpx;
		box-sizing: border-box;
		.left-img{
			width: 28rpx;
			height: 32rpx;
		}
		.content{
			flex: 1;
			margin-left: 48rpx;
			font-size: 28rpx;
			color: #021624;
		}
		.right-img{
			width: 40rpx;
			height: 40rpx;
		}
	}
</style>
